/*
 * @Author: softLink.gyj 
 * @Date: 2018-02-03 14:36:38 
 * @Last Modified by: softLink.gyj
 * @Last Modified time: 2018-02-09 17:01:11
 * 
 * webpack语法笔记,详细配置见webpack.config.js文件
 */


loader: {
    常用loader
        编译相关
            babel - loader,
            //babel-loader -> npm i babel-loader babel-core babel-preset-env --save-dev
                // 插件
                    // BabelPolyfill ->  用于转换es6,7的函数和方法  为应用准备，会污染全局，打包后文件较大 -> npm install babel-polyfill --save
                    // BabelRuntimeTransform  ->  用于转换es6,7的函数和方法  为框架准备，不会污染全局，打包后文件较小 -> npm install babel-plugin-transform-runtime --save-dev    npm install babel-runtime --save
                    // 使用babel插件时需要定义配置文件，BabelPolyfill 可以在全局中引入，BabelRuntimeTransform 需要在配置中定义   "plugins":["transform-runtime"]
            ts - loader
    样式相关
        style - loader,
        // options
            // insertAt('插入位置')： top || bottom
            // insertInto  插入到DOM
            // singleton   是否只是用一个style标签
            
        style-loader/url,
        style-loader/useble
            //主要用作创建标签
        css - loader,
            //主要作用让js import css
        less - loader,
        postcss - loader
    文件相关
        file - loader,
        url - loader

    语法
    module.exports = {
        module: {
            rules: [{
                test: /\.js$/, //规则
                use: 'babel-loader', //使用babel-loader
            }]
        }
    }
}

// 插件
plugins: {
    常用plugins
        优化相关
            CommonsChunkPlugin //提取不同chunk之间相同的代码
            UglifyjsWebpackPlugin //混淆压缩代码
        功能相关
            ExtractTextWebpackPlugin //提取css出来作为单独文件
            HtmlWebpackPlugin //根据HTML模板生成html
            HotModuleReplacementPlugin //模块热加载
            CopyWebpackPlugin //拷贝引用第三方资源

    语法
    const webpack = require('webpack');
    module.exports = {
        plugins: [
            new webpack.optimize.UglifyJsPlugin(), //混淆压缩代码
            
            //提取公共代码模块 
            new webpack.optimize.CommonsChunkPlugin({
                filename: 'vendor', //公用代码打包后的文件名或地址，需要自定义.后面的格式
                name: '', //公用代码打包后的文件名或地址，以.js结尾
                minChunk: 2, //提取公用代码出现的次数   num || functon || 无穷大   2:表示出现过2次就提取出来   
                trunks: [], //提取公用代码模块的范围
                children: '', //是否在子模块中查找
                deepChild: '', //在所有模块中查找依赖
                async: '', //创建异步的公共代码块
            }),


        ]
    }
}


// 代码分割和懒加载
    // webpack自带功能，只要改变写法就好
    // 使用懒加载时可以不需要手动引入JS文件，只引入一个主文件，然后配置好地址webpack会把其余文件自动引入
    方法一:
        webpack - methods  //webpack自带功能
        语法:
           require.ensure(dependencies,callback,errorCallback,chunkName)
           /* 
                参数:
                    dependencies:[],  懒加载模块的依赖，只会加载，不会执行
                    callback:fun   回调函数
                    errorCallback:fun   错误的回调函数,可省略
                    chunkName:string    代码块的名字
           */ 

           require.include('./moduleA')   //把moduleA提取出来

    方法二:
        ES-2015-Loader-Spec   //es2015动态import
        语法:
            import(/*webpackChunkName:'name'*/).then()   //在import函数中写入注释可以指定chunkName


名词
Chunk: '代码块'
Bundle: '被打包后'
Module: '模块'